
<template>
    <div>
       <Header>
            <i-col span="18" class="header-col">
                <i-col span="3" style="height: 64px; text-align: center; cursor: pointer;">
                    <!-- <img style="height: 64px;" src="../../assets/logos.png"> -->
                </i-col>
                <i-col span="11" style="height: 64px;">
                    <svg @click="svgClick" class="header-left-svg">
                        <use xlink:href="#icon-lianhua6"></use>
                    </svg>
                </i-col>
            </i-col>
            <i-col span="6" class="header-col">
                <Menu class="header-menu" mode="horizontal" theme="light" :active-name="activeName" @on-select="onSelectHandle">
                    <MenuItem name="liudao">
                        <Icon type="ios-paper" />
                        {{menuLiudaoName}}
                    </MenuItem>
                    <!-- <MenuItem name="notePlaza">
                        <Icon type="ios-construct" />
                        笔记广场
                    </MenuItem> -->
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-stats" />
                            个人中心
                        </template>
                        <MenuGroup title="使用">
                            <MenuItem name="updBaseInf">信息修改</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="操作">
                            <MenuItem name="updatedPwd">改密</MenuItem>
                            <MenuItem name="logout">退出</MenuItem>
                        </MenuGroup>
                    </Submenu>
                </Menu>
            </i-col>
        </Header>
        <UpdatedBaseInfoModal :isShowUpdInfoModal="isShowUpdInfoModal" @close-info-modal="closeInfoModal"></UpdatedBaseInfoModal>
        <UpdatePwdModal :isShowPwdModal="isShowPwdModal" @close-pwd-modal="closePwdModal"></UpdatePwdModal>
    </div>
</template>

<script lang="tsx">
import { Component, Vue } from "vue-property-decorator";
import { LOGOUT, INFO } from '@/store/modules/app/keys';
// import { SYSUSER_UPDATE_INFO, INFO as CrudINFO } from '@/store/modules/crud/keys';
import state from '@/store/modules/app/state';
import UpdatedBaseInfoModal from './persCenter/UpdatedBaseInfoModal.vue';
import UpdatePwdModal from './persCenter/UpdatePwdModal.vue';

@Component({components: { UpdatedBaseInfoModal,UpdatePwdModal }})
export default class TheHead extends Vue {
    isShowUpdInfoModal: boolean = false;
    isShowPwdModal: boolean = false;

    get activeName(){
        return state.activeName;
    }
    get menuLiudaoName(){
        return state.menuLiudaoName;
    }
    onSelectHandle(name: string ){
        if(name==='logout'){
            //点击退出时，移除本 地token,且通知服务器
            this.$store.dispatch(LOGOUT);
            this.$router.push('login');
            return;
        }
        state.activeName = name;
        if(name==='liudao' || name==='notePlaza'){
            window.sessionStorage.setItem("activeName", name);
        }
        if(name==='updBaseInf'){
            this.isShowUpdInfoModal = true;
            return;
        }
        if(name==='updatedPwd'){
            this.isShowPwdModal = true;
            return;
        }
        this.$router.push({name: name, replace: true});
    }
    svgClick(){
        
    }
    created() {
        state.activeName = 'liudao';
        const activeN = window.sessionStorage.getItem('activeName');
        if(activeN){
            state.activeName = activeN;
        }
        this.$store.commit(INFO,{key: 'menuLiudaoName', value: '六道众生'});
        this.$router.push(state.activeName);
    }
    closeInfoModal(){
        state.activeName = 'liudao';
        this.isShowUpdInfoModal = false;
    }
    closePwdModal(){
        state.activeName = 'liudao';
        this.isShowPwdModal = false;
    }
}
</script>

<style scoped>
.ivu-layout-header {
    background: #fff;
    padding: 0PX;
    height: 64px;
}
.ivu-menu-horizontal {
    height: 64px;
    box-shadow: unset;
    /* background: rgb(253, 250, 250); */
}
.header-left-svg {
    height: 64px;
    width: 108px;
    cursor: pointer;
}
.header-menu {
    z-index: 100;
}
.header-col {
    height: 64px;
    box-shadow: 3px 2px 0px rgb(145, 133, 133);
    z-index: 1000;
}
.ivu-menu-horizontal.ivu-menu-light:after {
    content: unset;
}
</style>
